<template>
    <div class="app cloak" :class="isready==true?'clear_cloak':''">
        <canvas class="poster"  canvas-id="poster" style="width: 300px;height: 400px;margin-top: 20px"></canvas>
        <div class="btn" @click="save()">保存相册</div>
    </div>
</template>

<script>
    var that = null
    var timer=null
    var isinit=false

    export default {
        data() {
            return this.datainit({
                code:null,
                info:null,
                bg:null,
                minicode:null
            })
        },
        created() {
            that = this
            this.isready = true
            timer=setInterval(function () {
                that.waiting_network()
            },1000)

        },
        onUnload(){
            clearInterval(timer)
        },
        mounted() {
            wx.showLoading({
                title: '正在生成海报',
            })

            that.code=that.get("code")
            that.check()
        },
        methods: {
            init() {
                wx.downloadFile({
                    url: that.baseurl+"api/writing/minicode?code="+that.code, // 仅为示例，并非真实的资源
                    success(res) {
                        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                        if (res.statusCode === 200) {
                            that.minicode=res.tempFilePath
                        }
                    }
                })
                wx.downloadFile({
                    url: that.resurl_ssl+that.site.poster, // 仅为示例，并非真实的资源
                    success(res) {
                        // 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
                        if (res.statusCode === 200) {
                            that.bg=res.tempFilePath
                        }
                    }
                })
                that.$post("api/writing/get",{code:that.code},function (data) {
                    that.info=data
                })
            },
            waiting_network(){
                if(that.minicode!=null&&that.bg!=null&&that.info!=null){
                    that.info_init()
                    clearInterval(timer)
                }
            },
            info_init(){
                let ctx = wx.createCanvasContext('poster')
                wx.hideLoading()
                if(isinit){
                    return
                }
                ctx.drawImage(that.bg, 0, 0, 300, 400)
                ctx.beginPath()
                let cx=90
                let cy=80
                let r=60
                ctx.save()
                ctx.arc(cx+r, cy+r, r, 0, 2 * Math.PI);
                ctx.clip();
                ctx.drawImage(that.minicode, cx, cy, r*2, r*2);
                ctx.restore();
                ctx.setFontSize(16)
                ctx.fillText("作品编号:"+that.info.code, 80, 240)
                ctx.fillText("作品名称:"+that.info.title, 80, 270)
                ctx.fillText("选手姓名:"+that.info.name, 80, 300)
                ctx.fillText("指导教师:"+that.info.teacher, 80, 330)
                ctx.draw()
                isinit=true;

            },
            save:function () {
                wx.canvasToTempFilePath({
                    canvasId: 'poster',
                    success(res) {
                        wx.saveImageToPhotosAlbum({
                            filePath:res.tempFilePath,
                            success(res) {
                                wx.showModal({
                                    title: '温馨提示',
                                    content: '您已成功的保存了您的作品海报到手机相册，您可以将此海报分享给朋友或者朋友圈',
                                    success(res) {
                                    }
                                })
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">
.poster{
    position: relative;
    margin: auto;
}
    .btn{
        position: relative;
        width: 300px;
        height: 40px;
        line-height: 40px;
        display: block;
        background: #F66;
        color: #FFF;
        text-align: center;
        margin: auto;
        margin-top: 20px;
    }
</style>

